<template>
  <div class="home" id="scrollDiv">
      <div class="search  " :class="{'bg-search':scrollNo>140}" @click="clickSearch">
        <search class="home-search" changeShow="true" @iconChange="changePrdList" placeholder="请输入商品名称"> </search>
      </div>

      <van-swipe :autoplay="3000" class="banner">
        <van-swipe-item v-for="(image, index) in bannerImg" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>


        <!--<van-list-->
          <!--v-model="loading"-->
          <!--:finished="finished"-->
          <!--loading-text="加载中..."-->
          <!--@load="onLoad">-->

          <div class="home-prd-list" v-for="item in this.$store.state.homepage.homePrdlist" >
            <div class="title" v-show="item.data!=null">
            <span class="title-text">{{item.title}}</span>
            </div>
            <prd-list :classChange="classChange" :prdList="item.data" @addCart="addCart" @lookDetail="lookDetail"></prd-list> 
          </div>
           <!--列表空提示信息-->
          <n-error v-show="this.$store.state.homepage.homePrdlist.length==0"></n-error>

          <div class="text-center footer-text">中国农业银行重庆市分行</div>
        <!--</van-list>-->
        <van-icon  class="go-top" name="upgrade" v-show="scrollNo>280" @click="goTop"/>
  </div>
</template>

<script>
import Vue from 'vue'
import { Dialog,Toast } from 'vant'
import {IMG_ROOT} from './../../../config'
import search from './tpl/search'
import prdList from './tpl/prdList'
import nError from './../error'
import * as api from './../../api/mainIndex'
export default {
  name: 'homePage',
  created (){

  },
  data () {
    return {
      scrollNo:0,  //滚动的位置
      bannerImg: [
        'https://img.yzcdn.cn/2.jpg',
        'https://img1.360buyimg.com/da/jfs/t19228/211/989392426/88793/7db97c49/5ab8af5cN6e2a5a56.jpg'
      ], //轮播图
      classChange:this.$store.state.homepage.classChange,//切换列表样式
      homePrdlist:[],//商品列表
      // loading: false,
      // finished: false,
    }
  },
  watch:{
    '$route' (to,now){
        let vm=this;
        if(vm.$route.name=='HomePage'){
          let scrollDiv = document.getElementById('scrollDiv');
          scrollDiv.scrollTop=vm.scrollNo;
        }
    }
  },
  methods:{
    GethomePrd (val){
      let vm=this;
      let body={
          catId:val,  
          pageIndex:1,
          pageSize:12
      }
      api.GetPrdList(body).then(res=>{
        if(res.data.result.hitResult){
          let obj1={};
          if(val=="12560"){
            obj1.title="瓜果种子";
          }else{
            obj1.title="家用五金";
          }
          obj1.data=res.data.result.hitResult;
          vm.$store.state.homepage.homePrdlist.push(obj1);
        }
      });
    },
    //点击搜索框
    clickSearch (){
        this.$router.push({name:'searchPage'})
    },
    // //下拉加载更多
    // onLoad() {
    //   // let vm =this;
    // },
    //列表切换样式
    changePrdList(res){
      this.classChange=res;
    },

    //加入购物车
    addCart(){
      console.log('加入购物车');
    },
    //查看详情
    lookDetail(){
      console.log('查看详情');
    },
    //滚动位置
    scrollInfo (){
      let vm=this;
      let scrollDiv = document.getElementById('scrollDiv');
      scrollDiv.scrollTop=this.$store.state.homepage.scrollNo;
      vm.scrollNo=this.$store.state.homepage.scrollNo;
      scrollDiv.addEventListener('scroll', ()=>{
          let scrollNum=scrollDiv.pageYOffset || scrollDiv.scrollTop || scrollDiv.scrollTop;
          vm.scrollNo=scrollNum;
          vm.$store.state.homepage.scrollNo = scrollNum
      });
    },
     //回到顶部
    goTop (){
      let scrollDiv = document.getElementById('scrollDiv');
      scrollDiv.scrollTop=0;
      this.scrollNo=0;
      this.$store.state.homepage.scrollNo=0;
    },
  },
  mounted (){
      document.title="首页"
      this.scrollInfo();
      if(this.$store.state.homepage.homePrdlist.length==0){
          this.GethomePrd('9920');   //家用五金
          this.GethomePrd('12560');   //瓜果种子
      }
  },

  components:{
    search,
    prdList,
    nError
  }
}
</script>


<style  lang="scss">
.home{
  background:#efefef;
  overflow-y:auto;
  .search{
      width:100%;
      position:fixed;
      top:0;
      z-index:5;
      padding:.133333rem 0;

  }
  .bg-search{
    /*background:rgba(243,243,243,1);*/
    background:#fff;
    border-bottom:.013333rem solid #ececec;
    .home-search{
      .change-class{
        .change-icon{
          color:#999999 !important;
        }
      }
    }
  }
  .banner{
    height:4.8rem;
    width:100%;
    img{
      width:100%;
      height:100%;
    }
  }
  .home-prd-list{
    margin-top:.133333rem;
    .title{
      padding:.266667rem;
      background:#fff;
      border-bottom:.013333rem solid #ececec;
      border-top:.013333rem solid #ececec;
      .title-text{
        font-weight:bold;
      }

    }
  }
  .go-top{
    position:fixed;
    bottom:1.8rem;
    left:.28rem;
    font-size:.888rem;
    color:#e4393c;
    z-index:5;
  }
  .footer-text{
    color:#999;
    margin:.266667rem 0;
  }

}


</style>
